$(function () {

    //首页数据的渲染
    // ajax+模板引擎

    // 当前页面
    var currentPage = 1;

    // 一页几条数据
    var pageSize = 5;

    function render() {
        $.ajax({
            type: 'get',
            url: '/category/querySecondCategoryPaging',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (res) {

                $('tbody').html(template('tmp', res))
                setPage(res.total)
            }
        })
    }

    render()



    // 分页功能
    function setPage(total) {
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,//当前页
            totalPages: Math.ceil(total / pageSize),//总页数
            onPageClicked: function (event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值.
                currentPage = page;
                render();
            }
        });
    }



    // 下拉列表数据填充
    // ajax取数据  + 模板引擎渲染
    $.ajax({
        type: 'get',
        url: '/category/queryTopCategoryPaging',
        data: {
            page: 1,
            pageSize: 100
        },
        dataType: 'json',
        success: function (res) {
            console.log(res)

            $('.cate-one-list').html(template('tmp-one', res))
        }
    })




    // 下拉列表选中
    // 点击a标签，获取a标签的文字，赋值给按钮
    // 获取a标签的data-id，赋值给隐藏域，将来会提交给后台
    $('.cate-one-list').on('click', 'a', function () {
        $('.btn-title').text($(this).text());
        $('#categoryId').val($(this).data('id'));

        // 在下拉裂变选中后，将下拉列表状态恢复为成功
        $('.add-form').data('bootstrapValidator').updateStatus('categoryId','VALID')
    })



    // 文件图片上传
    $('#file').fileupload({
        // 文件返回的数据会以json格式处理
        dataType: 'json',
        // data：图片上传后的对象，通过data.result.picAddr可以获取上传后的地址
        // done 在文件服务器 返回图片地址是执行  相当于success
        done: function (e, data) {
            var url = data.result.picAddr;
            $('#img').attr('src', url)

            // 保存图片的地址，到隐藏域
            $('#brandLogo').val(url);

            // 在图片预览完成后，将图片状态恢复为成功
            $('.add-form').data('bootstrapValidator').updateStatus('brandLogo','VALID')
        }
    })


    // 表单的非空校验

    $('.add-form').bootstrapValidator({
        // 指定不校验的类型，默认为[':disabled',':hidden',':not(:visible)']，可以不设置
        // 禁用的，
        excluded: [':disabled',],

        // 指定校验时的图标显示，默认是bootstrap风格  字体图标可以在成功或者失败时随便更改
        feedbackIcons: {
            // 成功时出现的图标
            valid: 'glyphicon glyphicon-ok',
            //    失败时出现的图标
            invalid: 'glyphicon glyphicon-remove',
            //    正在验证
            validating: 'glyphicon gltphicon-refresh'
        },

        // 设置要校验的数据(字段)
        // 字段
        fields: {
            // 表单校验插件是根据name属性进行校验的
            // 用户名
            categoryId: {
                // 校验规则
                validators: {
                    // 非空校验
                    notEmpty: {
                        // 如果不为空的话提示消息
                        message: '请选择一级分类'
                    },
                }
            },
            brandName: {
                // 校验规则
                validators: {
                    // 非空校验
                    notEmpty: {
                        // 如果不为空的话提示消息
                        message: '请输入二级分类输'
                    },
                }
            },
            brandLogo: {
                // 校验规则
                validators: {
                    // 非空校验
                    notEmpty: {
                        // 如果不为空的话提示消息
                        message: '请上传图片'
                    },
                }
            },
        }
    });



    // 添加二级分类
    // 利用插件，在表单数据合理的情况下触发
    $('.add-form').on('success.form.bv',function(e){
        e.preventDefault();
        
        $.ajax({
            type:'post',
            url:'/category/addSecondCategory',
            data:$('.add-form').serialize(),
            dataType:'json',
            success:function(res){
                console.log(res)

                // 页面重新渲染，
                render();


                // 隐藏模态框
                $('.modal-add').modal('hide');

                // 表单重置数据和样式
                $('.add-form').data('bootstrapValidator').resetForm(true)


                // 手动重置图片和按钮样式
                $('.btn-title').text('请选择一级分类');
                $('#img')[0].src='./images/none.png'
            }
        })
    })




})